import React, { useState } from 'react';
import { 
  Table, 
  Card, 
  Button, 
  Modal, 
  Form, 
  Input, 
  message 
} from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

interface DataItem {
  key: string;
  name: string;
  age: number;
  address: string;
}

const ListPage: React.FC = () => {
  const [dataSource, setDataSource] = useState<DataItem[]>([
    { key: '1', name: '张三', age: 32, address: '西湖区湖底公园1号' },
    { key: '2', name: '李四', age: 42, address: '西湖区湖底公园2号' },
  ]);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState<DataItem | null>(null);
  const [form] = Form.useForm();

  const columns = [
    { 
      title: '姓名', 
      dataIndex: 'name', 
      key: 'name' 
    },
    { 
      title: '年龄', 
      dataIndex: 'age', 
      key: 'age' 
    },
    { 
      title: '地址', 
      dataIndex: 'address', 
      key: 'address' 
    },
    {
      title: '操作',
      key: 'actions',
      render: (record: DataItem) => (
        <div>
          <Button 
            type="link" 
            icon={<EditOutlined />} 
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button 
            type="link" 
            danger 
            icon={<DeleteOutlined />} 
            onClick={() => handleDelete(record.key)}
          >
            删除
          </Button>
        </div>
      )
    }
  ];

  const handleAdd = () => {
    setCurrentRecord(null);
    setIsModalVisible(true);
  };

  const handleEdit = (record: DataItem) => {
    setCurrentRecord(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (key: string) => {
    setDataSource(prev => prev.filter(item => item.key !== key));
    message.success('删除成功');
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (currentRecord) {
        // 编辑
        setDataSource(prev => 
          prev.map(item => 
            item.key === currentRecord.key ? { ...item, ...values } : item
          )
        );
      } else {
        // 新增
        const newRecord = { 
          ...values, 
          key: `${dataSource.length + 1}` 
        };
        setDataSource(prev => [...prev, newRecord]);
      }
      
      setIsModalVisible(false);
      form.resetFields();
      message.success(currentRecord ? '编辑成功' : '新增成功');
    });
  };

  return (
    <Card 
      title="用户列表" 
      extra={
        <Button 
          type="primary" 
          icon={<PlusOutlined />} 
          onClick={handleAdd}
        >
          新增
        </Button>
      }
    >
      <Table 
        dataSource={dataSource} 
        columns={columns} 
        pagination={{ pageSize: 5 }}
      />

      <Modal
        title={currentRecord ? '编辑用户' : '新增用户'}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => {
          setIsModalVisible(false);
          form.resetFields();
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item 
            name="name" 
            label="姓名" 
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            name="age" 
            label="年龄" 
            rules={[{ required: true, message: '请输入年龄' }]}
          >
            <Input type="number" />
          </Form.Item>
          <Form.Item 
            name="address" 
            label="地址" 
            rules={[{ required: true, message: '请输入地址' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
};

export default ListPage; 